<template>
  <div id="competition-config" class="jx-content">
    <el-form id="yform" label-width="160px" :model="form" ref="form">
      <el-form-item label="竞赛名称：" prop="name">
        <el-input v-model="form.name" placeholder="请输入课程名称" maxlength="20" show-word-limit clearable
          :disabled="isGaming"></el-input>
      </el-form-item>
      <el-form-item label="预置图片：" prop="name">
        <div>
          <div class="tap">
            <i @click="leftArrow" class="iconfont icon-xiangzuo-copy leftArrow"></i>
            <i @click="rightArrow" class="iconfont icon-xiangyou rightArrow"></i>
            <div class="tapBox">
              <ul class="tapThrough">
                <li v-for="(item, index) in imgList" :key="index" @click="choose(item.id)">
                  <img :src="item.keyValuePath" />
                  <i :class="{ icons: item.id == isActive }"></i>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </el-form-item>
      <el-form-item label="竞赛类型：" prop="name">
        <el-radio v-model="form.matchType" :label="1" :disabled="isGaming">
          计时赛
        </el-radio>
        <el-radio v-model="form.matchType" :label="2" :disabled="isGaming">
          模拟赛
        </el-radio>
        <el-radio v-model="form.matchType" :label="3" :disabled="isGaming">
          自由练习
        </el-radio>
      </el-form-item>
      <el-form-item label="参考答案：" prop="answer"  v-show="form.matchType === 3">
        <el-radio v-model="form.answer" :label="true">
          选手可查看
        </el-radio>
        <el-radio v-model="form.answer" :label="false">
          关闭
        </el-radio>
      </el-form-item>
      <div v-show="form.matchType != 3">
        <el-form-item label="报名截至时间：" prop="name">
          <el-date-picker
            v-model="form.applyStartTime"
            clearable
            value-format="yyyy-MM-dd HH:mm:ss"
            type="datetime"
            placeholder="选择日期时间"
            :disabled="isGaming"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="竞赛开始时间：" prop="name">
          <el-date-picker
            v-model="form.startTime"
            clearable
            value-format="yyyy-MM-dd HH:mm:ss"
            type="datetime"
            placeholder="选择日期时间"
            :disabled="isGaming"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="竞赛结束时间：" prop="name">
          <el-date-picker
            v-model="form.endTime"
            clearable
            value-format="yyyy-MM-dd HH:mm:ss"
            type="datetime"
            placeholder="选择日期时间"
          >
          </el-date-picker>
        </el-form-item>
        <!-- <el-form-item label="竞赛起止时间：" prop="name">
          <el-date-picker v-model="timeList" type="datetimerange" range-separator="至" value-format="yyyy-MM-dd HH:mm:ss"
            start-placeholder="开始日期" end-placeholder="结束日期" clearable class="time-picker">
          </el-date-picker>
        </el-form-item> -->
        <el-form-item label="组织形式：" prop="name">
          <el-radio v-model="form.form" :label="1" :disabled="isGaming">个人赛</el-radio>
          <el-radio v-model="form.form" :label="2" :disabled="isGaming">小组赛</el-radio>
        </el-form-item>
        <el-form-item v-if="form.form == 2" label="允许报名人数：" prop="name">
          <el-input-number v-model="form.formGroupNum" :min="1" :max="100" step-strictly :disabled="isGaming"
            controls-position="right"></el-input-number>
        </el-form-item>
        <el-form-item label="分数计算方式：" prop="name">
          <el-checkbox v-model="form.computeAuto" :disabled="isGaming">
            自动判定
          </el-checkbox>
          <!-- <el-checkbox label="时间维度"></el-checkbox> -->
          <el-checkbox v-model="form.computeSubjective" :disabled="isGaming">
            手动给分
          </el-checkbox>
          <el-tooltip class="item" effect="dark" placement="right">
            <div slot="content" class="config-tooltip">
              1、若您希望所有的赛题由系统自动评判，请自动判定分数占比设定为100。<br />
              2、若您的判定题中有部分赛题需要手动给分，请自动判定分数占比设定为100，手动给分的竞赛任务不设置自动判定。 <br />
              3、 若您希望赛题系统自动判定的分数只占任务总分的一定比例，请分别设置自动判定及手动给分的比例。<br />
              4、若赛题完全由手动打分，请设置手动给分的比例为100。
            </div>
            <span>
              <i class="iconfont icon-wenti-m" style="margin-right:4px;"></i>说明
            </span>
          </el-tooltip>
        </el-form-item>
        <el-form-item class="short-input" label="分数占比：" prop="name">
          <el-input-number v-model="form.computeAutoRadio" :min="0" :max="100" step-strictly
            :disabled="!form.computeAuto || isGaming" controls-position="right"></el-input-number>
          <el-input-number v-model="form.computeSubjectiveRadio" :min="0" :max="100" step-strictly
            :disabled="!form.computeSubjective || isGaming" controls-position="right"></el-input-number>
          注：分数占比之和要等于100
        </el-form-item>
        <el-form-item label="报告形式：" prop="name">
          <el-radio v-model="form.reportForm" :label="1" :disabled="isGaming">
            在线报告
          </el-radio>
          <el-radio v-model="form.reportForm" :label="2" :disabled="isGaming">
            word版报告
          </el-radio>
        </el-form-item>
      </div>

      <!-- <el-form-item label="选手显示判定按钮：" prop="name">
        <el-switch
          v-model="form.judgeButton"
          active-color="#13ce66"
          inactive-color="#ff4949"
        >
        </el-switch>
      </el-form-item> -->
      <el-form-item label="竞赛简介：">
        <el-input type="textarea" v-model="form.introduction" rows="4" maxlength="200" show-word-limit clearable
          :disabled="isGaming"></el-input>
      </el-form-item>
    </el-form>
    <div class="footer">
      <el-button v-if="isAdd" class="button-style saveBtn" @click="onSubmit">
        保存
      </el-button>
      <el-button v-else class="button-style saveBtn" @click="onUpdate">修改</el-button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      //是否进行中
      isGaming: false,
      isAdd: false,
      courseId: "",
      form: {
        //报名开始时间
        applyStartTime: "",
        // 自动判定 0 非 1 存在
        computeAuto: false,
        // 自动判定分数占比
        computeAutoRadio: 0,
        // 主观打分 0 没有 1 存在
        computeSubjective: false,
        // 主观题比例
        computeSubjectiveRadio: 0,
        // 时间维度计算 0 非 1 存在
        computeTime: false,
        // 时间维度比例
        computeTimeRadio: 0,
        // 课程方向
        directionIds: [0],
        // 竞赛结束时间
        endTime: "",
        // 组织形式 1 个人赛 2 小组赛
        form: 1,
        // 小组赛最大人数
        formGroupNum: 1,
        // 图标id
        icon: "",
        // 镜像加载类型字符串
        imageLoadTypeStr: "",
        // 简介
        introduction: "",
        // 是否展示判定按钮 0 不展示 1 展示
        judgeButton: false,
        // 竞赛类型 1 计时 2 模拟 3 自由练习
        matchType: 1,
        // 课程名称
        name: "",
        // 报告形式 1 在线 2 word
        reportForm: 1,
        // 竞赛开始时间
        startTime: "",
        // 类型名称
        typeName: "",
        // 参考答案
        answer: true,
      },
      // timeList: [],
      imgList: [],
      num: 0,
      isActive: 0,
      value1: "",
      value2: "",
      radio: 1,
    };
  },
  watch: {
    //监听竞赛起止时间
    // timeList: function (newData, oldData) {
    //   if (newData && newData.length) {
    //     this.form.startTime = newData[0];
    //     this.form.endTime = newData[1];
    //   } else {
    //     this.form.startTime = "";
    //     this.form.endTime = "";
    //   }
    //   console.log(this.form.startTime);
    //   console.log(this.form.endTime);
    // },
    form(newData, oldData) {
      if (newData.matchType == 3) {
        this.$parent.$children[1].isFree = true;
      }
    },
    // //自由练习锁导航
    //         if (this.form.matchType == 3) {
    //           this.$parent.$children[1].isFree = true;
    //         }
  },
  created() {
    this.init();
    //添加锁导航
    if (this.$route.query.add) {
      this.$parent.$children[1].isAdd = true;
    }
  },
  methods: {
    init() {
      this.getImgList();
    },
    //修改
    //获取信息
    getInfo() {
      this.$http
        .get(`/tes/match/info/${this.courseId}`)
        .then((response) => {
          let res = response.data;
          if (res.code == "200") {
            console.log(res.data, 2223);
            this.form = res.data;
            if (this.form.matchType != 3) {
              // this.timeList.push(this.form.startTime);
              // this.timeList.push(this.form.endTime);
            }
            //比赛进行中 锁定
            if (this.form.matchStatus == 2 && this.form.matchType != 3) {
              this.isGaming = true;
            }
            // //自由练习锁导航
            // if (this.form.matchType == 3) {
            //   this.$parent.$children[1].isFree = true;
            // }
            this.isActive = this.form.icon;
          } else {
            this.$message.error(res.message);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //修改
    onUpdate() {
      const loading = this.$loading({
        lock: true,
        text: "保存中，请稍后",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      this.$http
        .post(`/tes/match/tea-set/update/${this.courseId}`, this.form)
        .then((response) => {
          let res = response.data;
          if (res.code == "200") {
            this.$message.success(res.message);
          } else {
            this.$message.error(res.message);
          }
          loading.close();
        })
        .catch((err) => {
          this.$message.error(res.message);
          loading.close();
        });
    },
    //修改 end

    handelChange2() { },
    //保存
    onSubmit() {
      const loading = this.$loading({
        lock: true,
        text: "保存中，请稍后",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      this.$http
        .post("/tes/course", this.form)
        .then((response) => {
          let res = response.data;
          if (res.code == "200") {
            this.$message.success(res.message);
            const id = res.data;
            this.$localstorage.putLocalStorage("setCourseId", id); //设置值
            this.$localstorage.putLocalStorage("courseId", id); //设置值
            //保存解锁导航
            this.$parent.$children[1].isAdd = false;
            //自由练习锁后四个导航
            if (this.form.matchType == 3) {
              this.$parent.$children[1].isFree = true;
            }
            //改二级导航位置
            this.$parent.$children[1].activeIndex = "/competitionManagement/introduce";
            this.$router.push("/competitionManagement/introduce");
          } else {
            this.$message.error(res.message);
          }
          loading.close();
        })
        .catch((err) => {
          this.$message.error(res.message);
          loading.close();
        });
    },
    getImgList() {
      this.$http
        .get("/tes/unauthorized/config?keys=courseIcon")
        .then((response) => {
          let res = response.data;
          if (res.code == "200") {
            this.imgList = res.data.courseIcon;
            //回填
            this.isAdd = this.$route.query.add;
            this.courseId = this.$localstorage.getLocalStorage("setCourseId");
            console.log(this.courseId, 22);
            if (!this.isAdd) {
              this.getInfo();
            }
          } else {
            this.$message.error(res.message);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },

    rightArrow() {
      this.num++;
      if (this.num >= Math.ceil($(".tapThrough").children("li").length / 4)) {
        this.num = 0;
      }
      $(".tapThrough").css("top", -1 * this.num * 177 + "px");
    },
    leftArrow() {
      this.num--;
      if (this.num < 0) {
        this.num = Math.ceil($(".tapThrough").children("li").length / 4) - 1;
      }
      $(".tapThrough").css("top", -1 * this.num * 177 + "px");
    },
    //选中事件
    choose(index) {
      this.isActive = index;
      this.form.icon = index;
    },
  },
};
</script>

<style lang="scss">
@import "./../../styles/layout/color_variables";
@import "./../../styles/ypublic.scss";

.el-picker-panel__body {
  .el-date-range-picker__time-header {
    .el-input__inner {
      width: 100% !important;
      ;
    }
  }
}

.config-tooltip {
  line-height: 24px;
}

#competition-config {
  .el-input-number {
    .el-input {
      width: 100%;

      input {
        width: 100%;
      }
    }

    .el-input-number__increase {
      top: 4px;
      line-height: 15px;
    }

    .el-input-number__decrease {
      bottom: 4px;
      line-height: 15px;
    }
  }

  .jx-content {
    margin: 20px auto;
    position: relative;
  }

  .is-dark:hover {
    top: 430px;
  }

  .el-input {
    width: 400px;

    .el-input__inner {
      width: 100%;
      padding-right: 50px;
    }

    .el-input__count-inner {
      background: none;
    }
  }

  .short-input {
    .el-input-number {
      width: 100px;
      margin-right: 10px;

      .el-input {
        width: 100px;

        input {
          width: 100%;
        }
      }

      .el-input-number__increase {
        top: 4px;
        line-height: 15px;
      }

      .el-input-number__decrease {
        bottom: 4px;
        line-height: 15px;
      }
    }
  }

  .el-date-editor.el-input__inner {
    width: 400px;

    .el-range-separator,
    .el-input__icon {
      line-height: 24px;
    }
  }

  .el-checkbox-group {
    line-height: 44px;
  }

  .el-form-item>>>.el-input__inner {
    height: 32px;
    border-radius: 4px;
    border: 1px solid #d9d9d9;
  }

  .el-form-item>>>textarea {
    height: 200px;
    resize: none;
    width: 800px;
  }

  .el-form-item>>>.el-form-item__content {
    height: auto;
  }

  .repeatInfo {
    position: absolute;
    right: 30px;
    top: 30px;

    .tips-name {
      clear: both;
      padding-top: 18px;
      color: #1277eb;
    }
  }

  .footer {
    text-align: center;
    margin-top: 100px;
  }

  .saveBtn {
    padding: 0;
    width: 90px;
    height: 32px;
  }

  .label {
    padding: 0 12px 0 10px;
    float: left;
  }

  .tap {
    height: 178px;
    width: 804px;
    margin: 20px 0 20px 10px;
    padding: 0 17px;
    position: relative;
    float: left;

    .leftArrow,
    .rightArrow {
      top: 76px;
      font-size: 16px;
      color: #727272;
      z-index: 1;
      display: inline-block;
      position: absolute;
      cursor: pointer;
    }

    .leftArrow {
      left: 0;
    }

    .rightArrow {
      right: 0;
    }

    .tapBox {
      height: 178px;
      width: auto;
      overflow: hidden;
      position: relative;

      ul {
        position: absolute;
        left: 0;
        top: 0;
      }

      li {
        width: 167px;
        height: 167px;
        background: #fff;
        float: left;
        margin: 5px 17px;
        color: #ffffff;
        border-radius: 5px;
        position: relative;
        cursor: pointer;
        transition: transform 0.3s;

        .icons {
          bottom: 7px;
          right: 10px;
          display: inline-block;
          width: 14px;
          height: 14px;
          position: absolute;
          background: url("./../../assets/images/right.png") no-repeat;
        }

        &:hover {
          // box-shadow: 0 2px 20px #beb7b7;
          transition: transform 0.3s;
          transform: scale(1.05);
        }

        img {
          width: 100%;
          height: 100%;
          position: relative;
          left: 0;
          top: 0;
        }
      }
    }
  }
}
</style>
